<template>
  <div class="app-container">
    <div class="optionBox clearfix">
      <el-form>
        <el-input placeholder="请输入内容" v-model.trim="categoryValue" class="chooseInput" clearable>
          <el-select v-model="inputCategory" slot="prepend" placeholder="请选择" clearable>
            <el-option v-for="category in categoryAttr" :label="category.label" :value="category.value" :key="category.value">
            </el-option>
          </el-select>
        </el-input>
        <label>订单时间
          <el-date-picker v-model="orderDate" type="daterange" @change="dateChange"  range-separator="至" start-placeholder="开始日期" value-format="yyyy-MM-dd" end-placeholder="结束日期"></el-date-picker>
        </label>
        <label>产品编号
          <el-select v-model="keywords.productCode" placeholder="订单状态" clearable style="width: 100px;">
            <el-option v-for="statusItem in proCodes" :label="statusItem.label" :value="statusItem.value" :key="statusItem.value">
            </el-option>
          </el-select>
        </label>
        <label>订单状态
          <el-select v-model="keywords.status" placeholder="订单状态" clearable style="width: 130px;">
            <el-option v-for="statusItem in orderStatus" :label="statusItem.label" :value="statusItem.value" :key="statusItem.value">
            </el-option>
          </el-select>
        </label>
        <el-button class="btn-size" type="primary" icon="el-icon-search" title="搜索" @click="queryMsg">
        </el-button>
      </el-form>
      <div class="fr clearfix buttonBox new-refrech">
        <el-button class="btn-size fl" icon="el-icon-refresh" title="刷新" @click="refresh">
        </el-button>
      </div>
    </div>
    <el-table :data="tableData" stripe class="table-out-border" v-loading="isLoading">
      <el-table-column align="center" prop="orderNo" label="订单编号" min-width="150"></el-table-column>
      <el-table-column align="center" prop="productCode" label="产品编号" min-width="80"></el-table-column>
      <el-table-column align="center" prop="org" label="平台机构号" min-width="150"></el-table-column>
      <el-table-column align="center" prop="bidderOrg" label="投标人机构号" min-width="130"></el-table-column>
      <el-table-column align="center" prop="status" label="订单状态" min-width="100">
        <template slot-scope="scope">{{scope.row.status | orderStatusF}}</template>
      </el-table-column>
      <el-table-column align="center" prop="amount" label="保证金金额(元)" min-width="120">
        <template slot-scope="scope">{{scope.row.amount|moneyFormatter}}</template>
      </el-table-column>
      <el-table-column align="center" prop="createDate" label="申请日期" min-width="120">
        <template slot-scope="scope">{{scope.row.createDate|transformTimeYMD}}</template>
      </el-table-column>
      <el-table-column align="center" prop="interestDate" label="起息日" min-width="120">
        <template slot-scope="scope">{{scope.row.interestDate|transformTimeYMD}}</template>
      </el-table-column>
      <el-table-column align="center" prop="refundDate" label="还款日" min-width="120">
        <template slot-scope="scope">{{scope.row.refundDate|transformTimeYMD}}</template>
      </el-table-column>
      <el-table-column align="center" prop="transferDay" label="计息天数" min-width="100">
        <template slot-scope="scope">{{scope.row.transferDay}}</template>
      </el-table-column>
      <el-table-column align="center" prop="actualFee" label="实际利息(元)" min-width="100">
        <template slot-scope="scope">{{scope.row.actualFee|moneyFormatter}}</template>
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="100">
        <template slot-scope="scope">
          <el-button type="text" @click="queryItemDetail(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pageBox fr clearfix">
      <el-pagination layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 30, 40]" :total="totalCount" :page-size="keywords.pageSize" :current-page="keywords.page" @size-change="handlePageSizeChange" @current-change="handlePageChange">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { clearNullAttr } from '@/api/common'
import { queryOrderList,queryProductCodes } from '@/api/order'

export default {
  data: function() {
    return {
      isLoading: false,
      tableData: null,
      totalCount: null, // 数据总条数
      inputCategory: null, // 下拉选择的查询属性
      categoryValue: null, // 下拉选择对应查询属性的值
      categoryAttr: [
        { label: '订单编号', value: 'orderNo' },
        { label: '平台机构号', value: 'org' },
        { label: '投标人机构号', value: 'bidderOrg' }
      ],
      keywords: { // 查询参数
        page: 1,
        pageSize: 10,
        orderNo: null, // 订单编号
        org: null, // 平台机构号
        bidderOrg: null, // 投标人机构号
        productCode: null, // 产品编号
        status: null, // 订单状态
        startDate: null, // 订单时间上限
        endDate: null  //  订单时间下限
      },
      orderStatus: [
        // { label: '申请', value: '01' },
        { label: '订单创建成功', value: 'OCS' },
        { label: '待缴手续费', value: 'CFE' },
        { label: '手续费缴纳成功', value: 'FES' },
        { label: '手续费缴纳失败', value: 'FEF' },
        { label: '保证金借用中', value: 'BBG' },
        { label: '保证金借用成功', value: 'BBS' },
        { label: '保证金借用失败', value: 'BBF' },
        { label: '保证金缴纳中', value: 'BPG' },
        { label: '保证金缴纳成功', value: 'BPS' },
        { label: '保证金缴纳失败', value: 'BPF' },
        { label: '保证金退还中', value: 'BRG' },
        { label: '保证金退还成功', value: 'BRS' },
        { label: '保证金退还失败', value: 'BRF' },
        { label: '保证金还款中', value: 'BMG' },
        { label: '保证金还款成功', value: 'BMS' },
        { label: '保证金还款失败', value: 'BMF' },
        { label: '订单关闭', value: 'OC' }
      ], // 订单状态下拉数据
      proCodes:[{label:'BDL01',value:'BDL01'}], // 产品编号下拉数据
      orderDate: ''
    }
  },
  filters: {

  },
  computed: {},
  created: function() {
      this.fetchData()
      this.queryProCodes()
  },
  methods: {
    fetchData() { // 查询代偿订单列表数据
      this.isLoading = true
      this.keywords[this.inputCategory] = this.categoryValue
      const uploadData = clearNullAttr(this.keywords)
      queryOrderList({}, uploadData).then(res => {
        console.log('list', res)
        if (res.code === '000000') {
          this.tableData = res.data.records
          this.totalCount = res.data.totalCount
          delete this.keywords[this.inputCategory]
          this.isLoading = false
        }
      }).catch(error => {
        this.isLoading = false
        console.log(error)
      })
    },
    queryProCodes(){ // 查产品编号
        queryProductCodes({}).then(pcodes => {
            console.log('qcodes',pcodes)
            if(pcodes.code === '000000' && pcodes.data && pcodes.data.records){
                let theproCodes =[]
                let proArray = pcodes.data.records
                for(i=0,l=proArray.length;i<l;i++){
                    let proCodeObject = {label:proArray[i].productCode,value:proArray[i].productCode}
                    theproCodes.push(proCodeObject)
                }
                this.proCodes = theproCodes
            }
        }).catch(error =>{
          console.log('qeryProCodes error',error)
        });
    },
    queryMsg() { // 查询按钮点击
      this.keywords.page = 1
      this.fetchData()
    },
    refresh() { // 刷新按钮点击事件
      this.keywords.page = 1
      this.fetchData()
    },
    queryItemDetail(row) {
      this.$router.push({
        path: '/order/orderdetails/' + row.bidorderId,
      })
    },
    handlePageChange(page) { // 页面跳转事件
      this.keywords.page = page
      this.fetchData()
    },
    handlePageSizeChange(pageSize) { // 表格一页显示的数据数目 改变事件
      this.keywords.pageSize = pageSize
      this.fetchData()
    },
    dateChange(dateArray){
        debugger
        if(dateArray){
            this.keywords.startDate = (new Date(dateArray[0])).getTime()
            this.keywords.endDate = (new Date(dateArray[1])).getTime()
        }else{
            this.keywords.startDate = null
            this.keywords.endDate = null
        }

    }
  }
}

</script>
<style lang="scss" scoped>
/* type="text/scss" */

.optionBox {
  label {
    margin-right: 10px;
  }
  form {
    .chooseInput {
      width: 300px;
      margin-right: 10px;
      .el-select {
        min-width: 120px;
      }
    }
  }
}

</style>
